<template>
    <div class="right_view">
        <div class="top">
            <div class="left">
                <template v-if="$store.state.selection_files.length==0">
                    <div class="item">
                        <div class="upload_bt bt" @click="$store.commit('set_upload_dialog',true)">
                            <i class="el-icon-upload2"></i>
                            上传
                        </div>
                    </div>
                    <!-- <div class="item">
                        <div class="new_bt bt" ref="new_bt" @click="new_contextmenu_show = !new_contextmenu_show">
                            <i class="el-icon-plus"></i>
                            新建
                        </div>
                        <div class="new_contextmenu" ref="new_contextmenu" v-if="new_contextmenu_show">
                            <div class="item">
                                <i class="icon-create-s"></i>
                                新建文件
                            </div>
                            <div class="my_divider">
                                <el-divider></el-divider>
                            </div>
                            <div class="item">
                                <i class="icon-tdoc-s"></i>
                                文档
                            </div>
                            <div class="item">
                                <i class="icon-txls-s"></i>
                                表格
                            </div>
                            <div class="my_divider">
                                <el-divider></el-divider>
                            </div>
                            <div class="item">
                                <i class="icon-word-s"></i>
                                Word 文档
                            </div>
                            <div class="item">
                                <i class="icon-xls-s"></i>
                                Excel 表格
                            </div>
                            <div class="item">
                                <i class="icon-ppt-s"></i>
                                PPT 幻灯片
                            </div>
                            <div class="my_divider">
                                <el-divider></el-divider>
                            </div>
                            <div class="item">
                                <i class="icon-bt-s"></i>
                                离线下载
                            </div>
                        </div>
                    </div> -->
                </template>
                <template v-else>
                    <div class="bt_list">
                        <el-badge :value="$store.state.selection_files.length">
                            <el-button-group>
                                <el-button size="medium">
                                    <Download_bt>
                                        <template #left>
                                            <i class="icon-download icon"></i>
                                        </template>
                                    </Download_bt>
                                </el-button>
                                <el-button size="medium">
                                    <Share_bt>
                                        <template #left>
                                            <i class="icon-share icon"></i>
                                        </template>
                                    </Share_bt>
                                </el-button>
                                <el-button size="medium">
                                    <Delete_bt>
                                        <template #left>
                                            <i class="icon-trash icon"></i>
                                        </template>
                                    </Delete_bt>
                                </el-button>
                            </el-button-group>
                        </el-badge>
                    </div>
                </template>
            </div>
            <div class="right">
                <Share_msg_bt></Share_msg_bt>
                <div class="user">
                    <User_contextmenu_bt></User_contextmenu_bt>
                </div>
            </div>
        </div>
        <div class="bottom">
            <template v-if="$store.state.search_data">
                <Search_cp></Search_cp>
            </template>
            <template v-else>
                <keep-alive>
                    <router-view></router-view>
                </keep-alive>
            </template>
        </div>
    </div>
</template>

<script>
import User_contextmenu_bt from '@/components/public_bt/user_contextmenu_bt'
import Download_bt from '@/components/public_bt/download_bt'
import Share_bt from '@/components/public_bt/share_bt'
import Delete_bt from '@/components/public_bt/delete_bt'
import Search_cp from '@/components/search_cp/search_cp'
import Share_msg_bt from '@/components/public_bt/share_msg_bt'
export default { //右半部分视图
    name: 'Right_view',
    components:{User_contextmenu_bt,Download_bt,Share_bt,Delete_bt,Search_cp,Share_msg_bt},
    data(){
        return{
            new_contextmenu_show:false, //控制新建目录菜单的显示
        };
    },
    created(){
        document.addEventListener('click', event => {  //如果元素不是在组件上点击的则隐藏该组件
            const e = event || window.event;
            if (this.$refs.new_contextmenu && !this.$refs.new_contextmenu.contains(e.target) && !this.$refs.new_bt.contains(e.target)) {
                this.new_contextmenu_show = false;
            }
        });
    },
    methods:{
        on_change(file){  //文件状态发生改变时的钩子
            this.$store.commit('add_upload_file',file);
            this.$refs.upload_bt.clearFiles();
        },
    },
}
</script>

<style scoped lang='scss'>
.right_view{
    width: 100%;
    max-height: 100vh;
    overflow: hidden;
    >.top{
        height: 65px;
        box-sizing: border-box;
        padding: 0 25px;
        border-bottom: 1px solid #f4f4f4;
        display: flex;
        flex-direction:row;
        justify-content: space-between;
        align-items: center;
        position:sticky;
        z-index: 999;
        top: 0;
        background-color: white;
        box-shadow: 0 0 8px 0 rgba(232,237,250,.6),0 2px 4px 0 rgba(232,237,250,.5);
        >.left{
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
            >.item{
                position: relative;
                z-index: 999;
                .bt{
                    height: 34px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin-right: 15px;
                    border-radius: 3px;
                    padding: 0 20px;
                    line-height: 100%;
                    cursor: pointer;
                    transition: all 0.2s;
                    i{
                        margin-right: 10px;
                        font-size: 20px;
                    }
                }
                .upload_bt{
                    background-color: #3b9fff;
                    border-color: #3b9fff;
                    color: white;
                    background-image: linear-gradient(to top, #00c6fb 0%, #005bea 100%);
                    box-shadow: 0 1px 2px 0 rgb(156, 101, 142);
                    &:hover{
                        background-color:#2977ea;
                    }
                }
                .new_bt{
                    background-color: white;
                    border: 1px solid #dbdbdb;
                    &:hover{
                        background-color: #f4f4f4;
                    }
                }
                .new_contextmenu{
                    position:absolute;
                    top: 36px;
                    left: 0;
                    z-index: 9999;
                    width:250px;
                    height: fit-content;
                    background-color: white;
                    border: 1px solid #c8ccd3;
                    border-radius: 2px;
                    box-shadow: 0 1px 4px 0 rgba(15,32,65,.2);
                    padding: 5px 0;
                    >.my_divider{
                        padding: 5px 0;
                        box-sizing: border-box;
                        .el-divider--horizontal{
                            margin:0;
                        }
                    }
                    >.item{
                        height: 40px;
                        display: flex;
                        flex-direction: row;
                        justify-content: flex-start;
                        align-items: center;
                        font-size: 14px;
                        color: #020202;
                        line-height: 100%;
                        padding: 0 15px;
                        transition: all 0.2s;
                        cursor: pointer;
                        &:hover{
                            background-color: #f4f4f4;
                        }
                        i{
                            width:24px;
                            height: 24px;
                            margin-right: 10px;
                        }
                    }
                }
            }
            >.bt_list{
                button{
                    /deep/span{
                        >div{
                            padding: 5px 10px;
                        }
                    }
                }
                i{
                    width: 24px;
                    height: 24px;
                    margin-right: 10px;
                }
            }
        }
        >.right{
            width: fit-content;
            display: flex;
            align-items: center;
            >div{
                margin-left: 20px;
                min-width: fit-content;
            }
        }
    }
    >.bottom{
        height: calc(100vh - 65px);
        overflow-y:auto;
    }
}
</style>
